<template>
  <div>
    <content-wrapper
      :tableList="tableList"
      :searchList="searchList"
      :setting="setting"
      @changeOpt="changeOpt"
      @changeTable="changeTable"
      @formValue="formValue"
    >
      <div slot="searchLeft">
        <a-button type="primary" style="margin-right: 20px" @click="exportFile">
          <a-icon type="cloud-download" />
          导出
        </a-button>
      </div>
      <a-modal
        title="添加备注"
        :visible.sync="visible"
        @ok="handleSubmit"
        @cancel="handleCancel"
      >
        <a-form :form="form">
          <a-form-item
            label="备注"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-textarea
              placeholder=""
              :rows="3"
              v-decorator="[
                'data',
                { rules: [{ required: true, message: '请输入备注！' }] }
              ]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </content-wrapper>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {
    contentWrapper: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      tableList: {
        columns: [
          {
            title: "ID",
            dataIndex: "id"
          },
          {
            title: "会员昵称",
            dataIndex: "username",
            width: 200,
            scopedSlots: { customRender: "username" }
          },
          {
            title: "手机号",
            dataIndex: "mobile"
          },
          {
            title: "福利标题",
            dataIndex: "weal_title",
            width: 150,
            scopedSlots: { customRender: "weal_title" }
          },
          {
            title: "福利ID",
            dataIndex: "weal_id"
          },
          {
            title: "状态",
            dataIndex: "status",
            align: "center",
            type: "deactivate",
            activeIndex: "2",
            scopedSlots: { customRender: "status" }
          },
          {
            title: "备注",
            dataIndex: "mark",
            width: 350,
            scopedSlots: { customRender: "mark" }
          },
          {
            title: "操作",
            dataIndex: "opt",
            width: 100,
            type: "btn",
            list: [
              {
                key: "status",
                value: 1,
                ath: "setGiftChangeList",
                label: "发放福利",
                extraValue: "gift",
                className: "text-green"
              }
            ],
            scopedSlots: { customRender: "opt" }
          }
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0
        },
        sorter: {}
      },
      searchList: [
        {
          type: "input",
          label: "手机号",
          placeholder: "手机号",
          name: "title"
        },
        {
          type: "search",
          label: "状态",
          name: "status",
          option: [
            {
              value: 1,
              title: "待发放"
            },
            {
              value: 2,
              title: "已发放"
            }
          ]
        }
      ],
      setting: {},
      searchInfo: {
        title: "",
        status: ""
      },
      editInfo: {}
    };
  },
  methods: {
    changeOpt(item, type) {
      switch (type) {
        case "gift":
          this.editInfo = item;
          this.visible = true;
          break;
      }
    },
    changeTable(pagination) {
      Object.assign(this.tableList.pagination, pagination);
      this.getInfo();
    },
    formValue(values) {
      this.tableList.pagination.current = 1;
      Object.assign(this.searchInfo, values);
      this.getInfo();
    },
    handleCancel() {
      this.form.resetFields();
      this.visible = false;
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$ajax
            .post(this.$api.setGiftChangeList, {
              data: values.data,
              id: this.editInfo.id
            })
            .then(() => {
              this.$notification.success({
                message: "操作成功"
              });
              this.handleCancel();
              this.getInfo();
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        }
      });
    },
    exportFile() {
      let url = this.$api.downloadGiftChangeList;
      if (this.searchInfo.title) {
        url += "&data=" + this.searchInfo.title;
      } else {
        url += "&data=";
      }
      if (this.searchInfo.status) {
        url += "&status=" + this.searchInfo.status;
      } else {
        url += "&status=";
      }
      url +=
        "&excel_download=1&token=" +
        this.$crypto.getAES(localStorage.getItem("token"));
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    getInfo() {
      this.$ajax
        .get(this.$api.getGiftChangeList, {
          page_size: this.tableList.pagination.pageSize,
          page: this.tableList.pagination.current,
          data: this.searchInfo.title,
          status: this.searchInfo.status
        })
        .then(res => {
          this.tableList.dataSource = res.data;
          this.tableList.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    if (this.$route.query.stayOut) {
      this.searchInfo.status = this.$route.query.stayOut;
    }
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
